<template>
	<div class="field-detail-view">
		<div class="icon-box flex">
			<ComIconSelect v-model="form.ico"></ComIconSelect>
			<a-input v-model="form.name" placeholder="输入字段名称"></a-input>
		</div>
		<div class="view-box">
			<div class="view-top">
				<ComTitle title3="预览"></ComTitle>
				<div class="flex">
					<div class="field-box f1">
						<div class="flex" style="width: max-content; gap: 4px; margin-bottom: 8px">
							<ComIcon :icon="bizInfo?.ico" style="color: #666" :size="16"></ComIcon>
							<p>{{ bizInfo?.name }}</p>
						</div>
						<div class="field-item" style="padding: 8px 0">
							<component
								:arcoProps="{
									'checked-value': '1',
									'unchecked-value': '0'
								}"
								:icon="formData.ico || SelectInfo(showFieldList, type, 'icon')"
								:name="formData?.name || '新字段'"
								v-model="dataValue"
								readonly
								status="view"
								:tag="SelectInfo(showFieldList, type, 'tag')"
								:prop="{ ...getProp(), addField: true }"
								:fieldType="SelectInfo(showFieldList, type, 'fieldType')"
								:is="SelectInfo(showFieldList, type, 'component')"
							></component>
						</div>
					</div>
					<ComIcon icon="EachApp_zuzhi1" v-if="showObjSetting" style="color: #d5d5d5; width: 40px; font-size: 20px; text-align: center"></ComIcon>
					<div class="field-box f1" v-if="showObjSetting">
						<div class="flex" style="width: max-content; gap: 4px; margin-bottom: 8px">
							<ComIcon :icon="relationRef?.relationInfo?.ico" style="color: #666" :size="16"></ComIcon>
							<p>{{ relationRef?.relationInfo?.name }}</p>
						</div>
						<div class="field-item" style="padding: 8px 0">
							<component
								:arcoProps="{
									'checked-value': '1',
									'unchecked-value': '0'
								}"
								:icon="relationRef?.keyInfo?.ico"
								:name="relationRef?.keyInfo?.name"
								v-model="dataValue"
								readonly
								status="view"
								:tag="SelectInfo(showFieldList, type, 'tag')"
								:prop="{ ...getProp(), addField: true }"
								:type="SelectInfo(showFieldList, type, 'fieldType')"
								:is="SelectInfo(showFieldList, type, 'component')"
							></component>
						</div>
					</div>
				</div>
			</div>
			<div class="extra-data" v-if="extraDataArr && !showObjSetting">
				<template v-for="item in extraDataArr" :key="item.value">
					<!-- 单选多选 -->
					<div v-if="item.type === 'list'" style="width: 100%">
						<setList ref="listRef" v-model="item.chooseValue" :form="form"></setList>
					</div>
					<!-- 选择框输入框 -->
					<div class="extra-item" v-else>
						<div class="label">
							<div class="icon">
								<ComIcon :icon="item.icon" :size="12"></ComIcon>
							</div>
							<div class="label-title">
								<p>{{ item.label }}</p>
								<span v-if="item.tips">{{ item.tips }}</span>
							</div>
						</div>
						<div class="value">
							<a-select
								auto-complete="off"
								:trigger-props="{ contentStyle: { width: 'max-content', minWidth: '120px' } }"
								v-if="item.type === 'select'"
								allow-search
								size="mini"
								allow-clear
								v-model="item.chooseValue"
								:style="{ width: '120px' }"
								:disabled="item?.disabledFn?.(getProp(), item)"
								placeholder="请选择"
								@change="handleChange"
							>
								<a-option v-for="child in item.options" :value="child.value" :key="child.value">
									<span v-if="child.pre">{{ child.pre }}</span>
									{{ child.label }}
									<span v-if="child.next">{{ child.next }}</span>
								</a-option>
							</a-select>
							<a-input-number
								size="mini"
								v-else-if="item.type === 'NumberInput'"
								v-model="item.chooseValue"
								:style="{ width: '120px' }"
								placeholder="请填写"
								:min="item?.other?.min || 0"
								:max="item?.other?.max"
							/>
							<a-input v-else-if="item.type === 'input'" v-model="item.chooseValue" size="mini" :style="{ width: '200px' }" placeholder="*" />
						</div>
					</div>
				</template>
			</div>
			<div class="extra-data" v-else-if="showObjSetting">
				<relation ref="relationRef" :bizId="bizId" :form="form" />
			</div>
			<div class="view-extra">
				<ComTitle title3="其他配置"></ComTitle>
				<FieldBool label-width="100px" icon="EachApp_kaiguan1" size="small" v-model="form.isRequired" name="是否必填"></FieldBool>
				<FieldBool label-width="100px" icon="EachApp_kaiguan1" size="small" v-model="form.unique" name="字段唯一性"></FieldBool>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { queryBiz } from "@/api/customerManage/setting";
import { useExtraData, useShowFieldList } from "@/utils/field";
import { SelectInfo } from "@/utils";
import { ref } from "vue";
import setList from "./setList.vue";
import relation from "./relation.vue";
const showFieldList = useShowFieldList();
const message = useMessage();
const extraData = ref(useExtraData()); //字段的额外配置
const form = ref({
	name: "",
	ico: "",
	extra: "",
	isRequired: true,
	unique: false
});

const extraDataArr = computed(() => {
	if (!props.type) return [];
	const arr = extraData.value[props.type];
	if (props.formData?.extra) {
		const obj = JSON.parse(props.formData?.extra);
		if (Array.isArray(arr)) {
			arr.forEach((i) => {
				i.chooseValue = obj[i.field];
			});
		}
	}

	return arr;
});

// 关系配置
const showObjSetting = computed(() => {
	return [16].includes(Number(props.type));
});

const props = defineProps({
	type: [Number, String],
	bizId: [Number, String],
	groupId: [Number, String],
	formData: {
		type: Object,
		default: () => {}
	}
});
const dataValue = ref(null);

watch(
	() => props.type,
	(data) => {
		if (data) {
			dataValue.value = SelectInfo(showFieldList, data, "default");
		}
	},
	{ immediate: true }
);

const handleChange = (data) => {
	if (props.type === 3) {
		dataValue.value = data;
	}
	console.log(data);
};

const bizInfo = ref({});
const getDetail = async () => {
	const data = await queryBiz({
		id: props.bizId
	});
	bizInfo.value = data;
};
watch(
	() => props.bizId,
	(data) => {
		if (data) {
			getDetail();
		}
	},
	{ immediate: true }
);
watch(
	() => props.formData,
	(data) => {
		if (data) {
			form.value = data;
		}
	},
	{ immediate: true }
);
const listRef = ref(null);
const relationRef = ref(null);
const getForm = async () => {
	let extra = {};
	if (showObjSetting.value) {
		extra = getRelation(); //关系时候的额外数据
	} else {
		extra = getProp();
	}

	if (!extra) return;

	if (listRef.value) {
		const flag = listRef.value.map(async (i) => {
			await i.validate();
		});
		await Promise.all(flag);
	}
	if (!form.value.name) {
		message.error("请输入字段名称");
		return false;
	}
	if (!form.value.ico) {
		message.error("请选择图标");
		return false;
	}
	if ([5, 6].includes(Number(props.type))) {
		const fieldValueList = extra.selectList.map((i, idx) => {
			return {
				...i,
				bizId: props.bizId,
				groupId: props.groupId,
				sort: idx + 1
			};
		});

		form.value.fieldValueList = fieldValueList; //配置数据
	} else {
		form.value.extra = JSON.stringify(extra); //额外数据（下方选择的数据JSON）
	}
	return form.value;
};

// 获取额外配置数据
const getProp = () => {
	const arr = extraDataArr.value;
	const info = form.value;
	if (!arr) return info;
	const obj = arrayToObject(arr);
	return { ...obj, ...info };
};

const getRelation = () => {
	if (relationRef.value) {
		return relationRef.value.getForm();
	}
	return false;
};

function arrayToObject(arr: { field; chooseValue }[]) {
	return arr.reduce((acc, item) => {
		acc[item.field] = item.chooseValue;
		return acc;
	}, {});
}

watch(
	() => props.type,
	(data) => {
		if (data !== "") {
			const info = showFieldList.find((i) => i.value === data);
			form.value.ico = info?.icon;
		}
	},
	{ immediate: true }
);

defineExpose({
	getForm,
	bizInfo
});
</script>

<style scoped lang="scss">
.field-detail-view {
	width: 560px;
	.icon-box {
		gap: 12px;
	}
	.view-box {
		border: 1px solid #ebebeb;
		background-color: #fafafa;
		border-radius: 6px;
		margin-top: 12px;
		.view-top {
			padding: 24px;
			padding-bottom: 12px;
		}
		.view-extra {
			padding: 0 24px 24px 24px;
		}
		.field-box {
			border: 1px solid #f2f2f2;
			border-radius: 6px;
			background-color: #fcfcfc;
			padding: 12px;
			> p {
				font-size: 13px;
				color: #666;
			}
			.field-item {
				border-radius: 6px;
				border: 1px solid #f2f2f2;
				background-color: #ffffff;
				// padding: 24px;
				// min-height: 52px;
			}
		}
	}
}
.extra-data {
	border-top: 1px solid #ebebeb;
	.extra-item {
		display: flex;
		align-items: center;
		min-height: 52px;
		border-bottom: 1px solid #f2f2f2;
		justify-content: space-between;
		font-size: 12px;
		margin: 0 24px;
		color: #999;
		.label {
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.icon {
			width: 20px;
			height: 20px;
			border: 1px solid #f2f2f2;
			border-radius: 6px;
			color: #165dff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.label-title {
			line-height: 1;
			span {
				color: #c9cdd4;
				font-size: 10px;
			}
		}
		&:last-child {
			border-bottom: none;
			margin-bottom: 12px;
		}
		&:first-child {
			margin-top: 12px;
		}
	}
}
</style>
